import * as React from 'react';
import {
  View,
  Text,
  Image,
  ImageBackground,
  TouchableNativeFeedback,
  DeviceEventEmitter,
} from 'react-native';
import BasePageV5 from 'react-native-cdy-baseui/components/BasePageV5';
import ImageConstants from '../resources/ImageConstants';
import Row from 'react-native-cdy-baseui/components/Row';
import AutoSizingImage from 'react-native-cdy-baseui/components/AutoSizingImage';
import {responsiveNumber} from 'react-native-responsive-number/src/index';
import moment from 'moment';
import HttpUtil from 'react-native-cdy-baseui/network/HttpUtil';
import {TouchableOpacity} from 'react-native-gesture-handler';

class MainPage extends BasePageV5 {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async didMount() {
    super.didMount();
  }

  renderContent() {
    let day = moment();
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'stretch',
        }}>
        <Image
          source={ImageConstants.IMG_BCG}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
          resizeMode="cover"
        />
        <Image
          source={ImageConstants.IMG_SHADOW}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
        />
        <Row
          style={{
            height: '80%',
            marginTop: '7%',
            justifyContent: 'space-around',
            alignItems: 'center',
            marginHorizontal: '5%',
          }}>
          <AutoSizingImage
            source={ImageConstants.IMG_LEFT_SHADOW}
            style={{width: '17%', alignItems: 'center', paddingTop: '3%'}}>
            <Text style={{color: '#64C0AB', fontSize: responsiveNumber(12)}}>
              {day.format('MM-DD')}
            </Text>
            <Text
              style={{
                color: '#898989',
                fontSize: responsiveNumber(6),
                marginTop: '2%',
              }}>
              {day.format('ddd')}
            </Text>
            <Image
              source={ImageConstants.IMG_ICON_DAY}
              style={{width: '70%'}}
              resizeMode="contain"
            />
          </AutoSizingImage>

          <AutoSizingImage
            source={ImageConstants.IMG_RIGHT_SHADOW}
            style={{width: '25%', alignItems: 'center', paddingTop: '3%'}}>
            <TouchableOpacity
              onPress={() => {
                this.navigatePage('课表');
                DeviceEventEmitter.emit('SET_INDEX', 2);
              }}>
              <Text style={{color: '#64C0AB', fontSize: responsiveNumber(12)}}>
                课表
              </Text>
              <Text
                style={{
                  color: '#898989',
                  fontSize: responsiveNumber(6),
                  marginTop: '2%',
                }}>
                COURSE SCHEDULE
              </Text>
              <ImageBackground
                source={ImageConstants.IMG_BALL}
                style={{
                  width: '80%',
                  marginTop: '10%',
                  marginLeft: '20%',
                  paddingLeft: '5%',
                  paddingBottom: '10%',
                }}
                resizeMode="contain">
                <Image
                  source={ImageConstants.IMG_ICON_CURRICULUM}
                  style={{width: '70%'}}
                  resizeMode="contain"
                />
              </ImageBackground>
            </TouchableOpacity>
          </AutoSizingImage>

          <AutoSizingImage
            source={ImageConstants.IMG_RIGHT_SHADOW}
            style={{width: '25%', alignItems: 'center', paddingTop: '3%'}}>
            <TouchableOpacity
              onPress={() => {
                this.navigatePage('督导');
                DeviceEventEmitter.emit('SET_INDEX', 3);
              }}>
              <Text
                pointerEvents={'none'}
                style={{color: '#64C0AB', fontSize: responsiveNumber(12)}}>
                督导
              </Text>
              <Text
                pointerEvents={'none'}
                style={{
                  color: '#898989',
                  fontSize: responsiveNumber(6),
                  marginTop: '2%',
                }}>
                SUPERVISION
              </Text>
              <ImageBackground
                pointerEvents={'none'}
                source={ImageConstants.IMG_BALL}
                style={{
                  width: '80%',
                  marginTop: '10%',
                  marginLeft: '20%',
                  paddingLeft: '5%',
                  paddingBottom: '10%',
                }}
                resizeMode="contain">
                <Image
                  pointerEvents={'none'}
                  source={ImageConstants.IMG_ICON_SUPERVISION}
                  style={{width: '70%'}}
                  resizeMode="contain"
                />
              </ImageBackground>
            </TouchableOpacity>
          </AutoSizingImage>

          <AutoSizingImage
            source={ImageConstants.IMG_RIGHT_SHADOW}
            style={{width: '25%', alignItems: 'center', paddingTop: '3%'}}>
            <TouchableOpacity
              onPress={() => {
                this.navigatePage('考勤');
                DeviceEventEmitter.emit('SET_INDEX', 4);
              }}>
              <Text style={{color: '#64C0AB', fontSize: responsiveNumber(12)}}>
                考勤
              </Text>
              <Text
                style={{
                  color: '#898989',
                  fontSize: responsiveNumber(6),
                  marginTop: '2%',
                }}>
                CHECK
              </Text>
              <ImageBackground
                source={ImageConstants.IMG_BALL}
                style={{
                  width: '80%',
                  marginTop: '10%',
                  marginLeft: '20%',
                  paddingLeft: '5%',
                  paddingBottom: '10%',
                }}
                resizeMode="contain">
                <Image
                  source={ImageConstants.IMG_ICON_CHECK}
                  style={{width: '70%'}}
                  resizeMode="contain"
                />
              </ImageBackground>
            </TouchableOpacity>
          </AutoSizingImage>
        </Row>
        <AutoSizingImage
          source={ImageConstants.IMG_BOTTOM_TEXT}
          style={{alignSelf: 'center', width: '60%'}}
          resizeMode={'contain'}
        />
      </View>
    );
  }
}

export default MainPage;
